<template>
  <div id="todoList">
    <!--<input v-model="inputVal" @keyup.enter="handleEnter">-->

    <h3>{{msg}}</h3>

    <mt-field label="用户名" placeholder="请添加" v-model="inputVal" ref="input1" @keyup.enter.native="handleEnter"></mt-field>
    <!--<mt-button type="default" @click="add">default</mt-button>-->
    <div class="todoItem">
      <item v-for="(todo,index) in todos" :content="todo" :index="index" :key="index" @del="handelDel"></item>
    </div>
    <!--<mt-tab-container-item>-->
      <!--<mt-cell v-for="(n,index) in todos" :key="index"></mt-cell>-->
    <!--</mt-tab-container-item>-->
  </div>
</template>

<script>
  import item from '../../components/item'
  export default {
    name: "todoList",
    data() {
      return {
        msg:'todoList',
        inputVal:'',
        todos:[]
      }
    },
    mounted(){
      let src = window.location.href;
      // console.log(src);
      // console.log(this.$route.params.id);
    },
    components:{
      'item':item
    },
    methods: {
      handleEnter(){
        this.todos.push(this.inputVal);
        this.inputVal = ''
      },
      handelDel(index){
        this.todos.splice(index,1);
      }
      // add(){
      //   this.$refs.input1.value = '22'
      // }
    }
  }
</script>

<style scoped>
.todoItem{
  margin-top: 20px;
}
</style>
